<template>
  <!-- 日报车型维护 OEM -->
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110"></TopFilter>

    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTable
        ref="table"
        columnsRef="qjhDealerSummodel"
        :isPagination="false"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :onRowSelectChange="selectChangeHandle"
        :onColumnsChange="columns => (this.columns = columns)"
      >
        <template slot="controls" slot-scope="props">
          <multiuse-button size="small" type="primary" :disabled="isEnabled" :click="enableHandle.bind(this, 10031001)">启 用</multiuse-button>
          <multiuse-button size="small" type="primary" :disabled="isDisabled" :click="enableHandle.bind(this, 10031002)">停 用</multiuse-button>
        </template>
      </FilterTable>
    </Spin>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryList, enableChange } from '@/api/omSale/DealerDaily/DealerModelMaintain';
import { vehicleConfiguration } from '@/api/omFinance';

export default {
  name: 'DealerModelMaintain',
  mixins: [dictionary],

  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryList,
      fetchParams: {},
      formData: {},
      exportLoading: false,
      isEnabled: true,
      isDisabled: true,
      modelIds: []
    };
  },
  created() {
    this.queryModel();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },

  methods: {
    // 查询车型
    async queryModel() {
      const res = await vehicleConfiguration(0, { isUnlimited: 10041001 });
      if (res.resultCode == 200) {
        this.topFilterList.find(item => item.fieldName === 'vehicleInfo').itemList = res.data;
      }
    },
    selectChangeHandle(rows) {
      this.modelIds = [];
      if (rows.length > 0) {
        this.isEnabled = !rows.every(x => x.startType == 10031002);
        this.isDisabled = !rows.every(x => x.startType == 10031001);
        rows.map(x => {
          this.modelIds.push(x.modelId);
        });
        return;
      }
      this.isEnabled = true;
      this.isDisabled = true;
    },
    // 启用/禁用
    async enableHandle(type) {
      let str = type == 10031001 ? '启用' : '停用';
      await this.$confirm(`是否${str}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let params = {
            typeCode: type,
            modelIds: this.modelIds
          };
          const res = await enableChange(params);

          if (res.resultCode == 200) {
            this.$notify.success({ title: '提示信息', message: `${str}成功！` });

            this.fetchParams = { ...this.fetchParams };
          }
        })
        .catch(() => {});
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    changeHandle(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    createdFrom() {
      return [
        {
          type: 'INPUT_CASCADER',
          label: '车系选择',
          fieldName: 'vehicleInfo',
          placeholder: '请选择',
          options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
          itemList: []
        },
        {
          type: 'INPUT',
          label: '车型代码',
          fieldName: 'modelCode',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '车型名称',
          fieldName: 'modelName',
          placeholder: '请输入'
        },
        {
          type: 'SELECT',
          label: '启用标记',
          fieldName: 'startType',
          placeholder: '请选择',
          itemList: this.createDictList('1003')
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '品牌名称',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型代码',
          dataIndex: 'modelCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '启用标记',
          dataIndex: 'startType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1003'),
          render: props => {
            return <span>{this.createDictText(props.row.startType, '1003')}</span>;
          }
        },
        {
          title: '修改人',
          dataIndex: 'updatedByName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '修改时间',
          dataIndex: 'updatedAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    }
  }
};
</script>
